<script setup lang="ts">
import {ref} from 'vue'
import {getTableList,getAgeList} from '@/mock';
// 筛选项信息
const formValue = ref({
  school: '清华',
});
const formTableProps = ref({
  searchForm: {
    searchList: [
      {
        label: '时间',
        key: ['star', 'end'],
        type: 'datePicker',
        devAttrs: {
          type: 'datetimerange'
        }
      },
      {
        label: '姓名',
        key: 'name',
        type: 'input',
        devAttrs: {
          placeholder: '请输入姓名'
        }
      }, {
        label: '年龄',
        key: 'age',
        type: 'input',
        devAttrs: {
          placeholder: '请输入年龄'
        }
      }, {
        label: '性别',
        key: 'sex',
        type: 'select',
        devAttrs: {
          placeholder: '请选择性别',
          useApi: true,
          api: getAgeList
        },
      }, {
        label: '学籍号',
        key: 'studentId',
        type: 'input',
        devAttrs: {
          placeholder: '请输入学籍号'
        }
      }, {
        label: '年级',
        key: 'grade',
        type: 'select',
        devAttrs: {
          placeholder: '请选择年级',
          options: [{
            label: '一年级',
            value: '1'
          }, {
            label: '二年级',
            value: '2'
          }]
        }
      }, {
        label: '学校',
        key: 'school',
        type: 'input',
        devAttrs: {
          placeholder: '请输入学校'
        },
        defaultCollapse: true
      }
    ],
    isCollapse: true,
    elFormProps: {
      labelWidth: '60'
    },
    formValue
  },
  searchTable: {
    containerName: '.framework-content',
    columns: [
      {
        label: '姓名',
        prop: 'name',
        align: 'center',
      },
      {
        label: '年龄',
        prop: 'age',
        align: 'center',
      },
      {
        label: '省份',
        prop: 'address',
        fixed: 'right',
        align: 'center',
        tips: '学生所在的省份',
      }
    ],
    query: formValue,
    api: getTableList,
    elTableAttrs: {
      'scrollbar-always-on': true
    }
  }
});
</script>

<template>
  <dev-form-table
      v-bind="formTableProps"
      ref="devElFormTableRef">
  </dev-form-table>
</template>

<style scoped>

</style>
